<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script type="text/babel">
    class App extends React.Component{
        state={
            // filter includes
            list:[],
            navList: [
                {
                    name: "全部",
                    type: "all",
                }, {
                    name: "法师",
                    type: "mage"
                }, {
                    name: "战士",
                    type: "fighter"
                }, {
                    name: "坦克",
                    type: "tank"
                }, {
                    name: "刺客",
                    type: "assassin"
                }, {
                    name: "射手",
                    type: "marksman"
                }, {
                    name: "辅助",
                    type: "support"
                }
            ],
        }
        render(){
            // render不能发送请求更新状态否则就是进入死循环
            console.log("渲染中")
            return (
                <div>
                 <h1>发送请求</h1>   
                 {
                    this.state.list.map((item,index)=>{
                        return (
                            <div key={index}>
                             <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`} alt="" />    
                            </div>
                        )
                    })
                 } 
                </div>
            )
        }
        // 组件渲染后调用的钩子函数
        componentDidMount(){
            console.log("组件渲染后")
            $.ajax({
                url:"https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js",
                method:"get",
                dataType:"json",
                success:(res)=>{
                    console.log(res)
                    this.setState({
                        list:res.hero
                    })
                }
            })
        }
    }

    ReactDOM.render(<App/>,document.getElementById("root"));
   
    /* 
        评分标准：
        1. 页面搭建 20分
        2. 数据渲染 30分
        3. 选项卡功能 20分
        4. 分类过滤 30分
    */
</script>
</html>